<template>
	<view class="shop-list" v-if="this.dataList.length">
		<view class="shop-title f-color">
			<view class="shop-item" v-for="(item,index) in shopList.data" :key="index" @tap="changeTab(index)">
				<view :class="{'f-active-color':shopList.currentIndex === index}">{{item.name}}</view>
				<view class="shop-icon">
					<view class="iconfont icon-shangjiantou up" :class="{'f-active-color':item.status === 1}"></view>
					<view class="iconfont icon-xiajiantou down" :class="{'f-active-color':item.status === 2}"></view>
				</view>
			</view>
		</view>
		<Line />
		<CommodityList :dataList="dataList" />
	</view>
	<view v-else class="search-end">
		暂无数据
	</view>
</template>

<script>
	import CommodityList from '@/components/CommodityList/CommodityList.vue';
	import Line from "@/components/Line/Line.vue"
	import $http from "@/common/api/request.js"
	export default {
		name: "ShopList",
		props: {
			keyWord: String
		},
		data() {
			return {
				shopList: {
					currentIndex: 0,
					data: [{
							name: "价格",
							status: 1
						},
						{
							name: "折扣",
							status: 0
						},
						{
							name: "品牌",
							status: 0
						}
					]
				},
				dataList: []
			};
		},
		mounted() {
			$http.request({
				url: "/goods/search",
				data: {
					name: this.keyWord
				}
			}).then(res => {
				this.dataList = res.data
			}).catch(err => {
				uni.showToast({
					title: "请求失败",
					icon: "none"
				})
			})
		},
		methods: {
			changeTab(index) {
				//获取当前点击的数据
				let data = this.shopList.data[index]
				//获取点击的状态
				let status = data.status
				//取消其它箭头高亮
				for (let item of this.shopList.data) {
					if (item.name != data.name) {
						item.status = 0
					}
				}
				//切换箭头状态	
				this.shopList.data[index].status = status == 1 ? 2 : 1
				//文字高亮
				this.shopList.currentIndex = index
				//数据排序
				if (data.name == "价格") {
					this.dataList.sort(function(a, b) {
						if (data.status == 1) {
							return a.pprice - b.pprice
						} else {
							return b.pprice - a.pprice
						}
					})
				} else if (data.name == "折扣") {
					this.dataList.sort(function(a, b) {
						if (data.status == 1) {
							return a.discount - b.discount
						} else {
							return b.discount - a.discount
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shop-title {
		display: flex;

		.shop-item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			flex: 1;

			.shop-icon {
				position: relative;
				margin-left: 10rpx;

				.iconfont {
					position: absolute;
					left: 0;
					width: 16rpx;
					height: 8rpx;
				}

				.up {
					top: -20rpx;
				}

				.down {
					top: -8rpx;
				}
			}
		}
	}

	.search-end {
		text-align: center;
	}
</style>
